<template>
  <PageContainer>
    <Header title="身份设置">
      <template>
        <view class="hb-p-3 hb-flex hb-items-center">
          <TmImage
            class="hb-flex-shrink-0"
            :src="data?.iconFileUrl"
            :width="128"
            :height="128"
            :round="4"
            error-img-type="unit"
          />
          <view class="hb-flex-1 hb-h-16 hb-flex hb-flex-col hb-justify-around hb-ml-3">
            <TmText _class="hb-font-bold" :label="data?.botName" :font-size="32" />
            <TmText
              _class="text-overflow-2"
              :label="data?.botDescribe"
              :font-size="24"
              color="#969799"
            />
          </view>
        </view>
      </template>
    </Header>
    <view class="hb-p-3">
      <!-- 身份设置 -->
      <view class="hb-box-shadow-base hb-rounded-xl hb-bg-white hb-px-4 hb-mb-3">
        <TmText _class="hb-py-3" label="身份设置" color="#969799" :font-size="28" />
        <TmCell
          _class="hb-font-bold"
          title="圈子管理员"
          :title-font-size="32"
          :transparent="true"
          :margin="[0, 0]"
          :padding="[0, 24]"
        >
          <template #right>
            <view class="hb-flex hb-items-center" @click="handleSetAdminAuth">
              <TmText
                _class="hb-font-normal"
                :label="roleTypeText.get(roleType)"
                :color="isChangeRoleType ? '#333' : '#C8CACC'"
                :font-size="28"
              />
              <TmIcon
                _class="hb-ml-1 hb-font-normal"
                name="tmicon-angle-right"
                :color="isChangeRoleType ? '#969799' : '#C8CACC'"
                :font-size="24"
              />
            </view>
          </template>
        </TmCell>
        <TmCell :title-font-size="32" :transparent="true" :margin="[0, 0]" :padding="[0, 24]">
          <template #label>
            <view class="hb-flex hb-items-center" @click="handleShowIdentityHelp">
              <TmText _class="hb-font-bold" label="圈子身份" :font-size="32" />
              <TmIcon
                _class="hb-ml-1 hb-font-normal"
                name="ali-icon icon-question"
                color="#969799"
                :font-size="32"
              />
            </view>
          </template>
          <template #right>
            <view class="hb-flex hb-items-center" @click="handleSetIdentity">
              <TmText
                _class="hb-font-normal"
                :label="data?.identityName || '未设置身份'"
                :font-size="28"
              />
              <TmIcon
                _class="hb-ml-1 hb-font-normal"
                name="tmicon-angle-right"
                color="#969799"
                :font-size="24"
              />
            </view>
          </template>
        </TmCell>
      </view>
      <!-- 备注信息 -->
      <view class="hb-box-shadow-base hb-rounded-xl hb-bg-white hb-px-4">
        <TmText _class="hb-py-3" label="备注信息" color="#969799" :font-size="28" />
        <TmForm
          layout="vertical"
          :padding="[0, 0]"
          :margin="[0, 0]"
          @submit="handleSubmit"
          :transparent="true"
          :border="false"
          v-model="formData"
        >
          <TmFormItem
            :show-top-error-gap="false"
            :margin="[0, 0]"
            :padding="[0, 0]"
            :transparent="true"
            field="displayName"
          >
            <template #label>
              <TmText _class="hb-font-bold hb-mb-2" label="在本圈子的名称" :font-size="28" />
            </template>
            <TmInput
              v-model="formData.displayName"
              :font-size="28"
              show-char-number
              :maxlength="20"
              placeholder="请输入"
            />
          </TmFormItem>
          <TmFormItem
            :show-top-error-gap="false"
            :margin="[0, 0]"
            :padding="[0, 0]"
            :transparent="true"
            field="describe"
          >
            <template #label>
              <TmText _class="hb-font-bold hb-mb-2" label="描述备注" :font-size="28" />
            </template>
            <TmInput
              v-model="formData.describe"
              :height="160"
              :font-size="28"
              :inputPadding="[16, 16]"
              placeholder="备注成员的一些其他信息"
              type="textarea"
            />
          </TmFormItem>
        </TmForm>
      </view>
      <BottomSubmit submit-btn-label="保存" @submit="handleSubmit" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* circleMemberSetting 成员设置 */
  import { circleMemberDetail, updateCircleMemberInfo } from '@/api/contact';
  import { CircleMemberDetailResult } from '@/api/contact/types';
  import { RoleTypeEnum } from '@/enums/LoginEnum';
  import { CircleMemberSetting } from '@/router/types/modules';
  import { Toast } from '@/utils';

  const formData = reactive({
    displayName: '',
    describe: '',
  });

  const data = ref<CircleMemberDetailResult>();
  let success: CircleMemberSetting['success'];

  const isChangeRoleType = computed(() => {
    return (
      data.value?.currentRoleType === RoleTypeEnum.SUPER_ADMIN &&
      roleType.value !== RoleTypeEnum.SUPER_ADMIN
    );
  });

  customOnload<'circleMemberSetting'>((op) => {
    success = op.success;
    circleMemberDetail({ memberId: op.memberId }).then((res) => {
      roleType.value = res.roleType;
      formData.displayName = res.displayName || '';
      formData.describe = res.describe || '';
      data.value = res;
    });
  });

  const handleShowIdentityHelp = () => {
    uni.showModal({
      title: '圈子身份',
      content: '可以给圈子成员赋予身份标签，让该成员有独特身份标签展示。',
      confirmColor: '#2878FF',
      confirmText: '知道了',
      showCancel: false,
    });
  };

  const roleTypeText = new Map([
    [RoleTypeEnum.SUPER_ADMIN, '超级管理员'],
    [RoleTypeEnum.MEMBER, '无管理权限'],
    [RoleTypeEnum.ADMIN, '管理员'],
  ]);
  const roleType = ref<RoleTypeEnum>(RoleTypeEnum.MEMBER);

  /** 设置管理员权限 */
  function handleSetAdminAuth() {
    if (!isChangeRoleType.value) return;
    uni.showActionSheet({
      itemList: [roleTypeText.get(RoleTypeEnum.MEMBER), roleTypeText.get(RoleTypeEnum.ADMIN)],
      success: ({ tapIndex }) => {
        roleType.value = tapIndex ? RoleTypeEnum.ADMIN : RoleTypeEnum.MEMBER;
      },
    });
  }

  /** 设置身份 */
  function handleSetIdentity() {
    navigateTo({
      name: 'selectMemberIdentity',
      options: {
        circleId: data.value!.circleId,
        selected: data.value?.circleIdentityId,
        success: (d) => {
          data.value!.identityName = d?.name;
          data.value!.circleIdentityId = d?.id;
        },
      },
    });
  }

  function handleSubmit() {
    updateCircleMemberInfo({
      memberId: data.value!.id,
      circleId: data.value!.circleId,
      displayName: formData.displayName,
      describe: formData.describe,
      circleIdentityId: data.value!.circleIdentityId,
      roleType: roleType.value,
    }).then(() => {
      success?.();
      Toast({
        title: '操作成功',
        success: () => navigateBack(),
      });
    });
  }
</script>

<style lang="scss" scoped></style>
